var TableSelect = function () {
  var template = /* html */ `
    <el-select v-model="selectValue" :value-key="valueKey" :loading="loading" :filterable="filterable" :clearable="clearable"
      :size="size" :placeholder="placeholder" @change="selectChange" @visible-change="visibleChange">
      <slot :options="dropdownOptions">
      <template v-if="dropdownOptions.length>0">
        <template v-for="option in dropdownOptions">
          <template v-if="optionType!=='object'">
            <el-option :key="'option_'+option" :value="option"></el-option>
          </template>
          <template v-else-if="valueKey">
            <el-option :key="'option_'+option[valueKey]" :value="option" :label="option[labelField]">
              <slot name="option-item" :option="option" v-if="hasOptionSlot"></slot>
            </el-option>
          </template>
          <template v-else>
            <el-option :key="'option_'+option[valueField]" :value="option[valueField]" :label="option[labelField]"></el-option>
          </template>
        </template>
      </template>
      </slot>
    </el-select>
  `;

  return {
    props: {
      value: {
        type: [Number, Object, String],
        required: true
      },
      options: {
        type: Array,
        default: function () {
          return [];
        }
      },
      valueKey: String,
      loading: Boolean,
      filterable: Boolean,
      clearable: Boolean,
      placeholder: String,
      valueField: {
        type: String,
        default: 'value'
      },
      labelField: {
        type: String,
        default: 'label'
      },
      size: {
        type: String,
        default: 'mini'
      }
    },

    watch: {
      value: function (val) {
        if (this.inputValue !== null) {
          this.inputValue = null;
          return;
        }
        this.selectValue = val;
      }
    },

    computed: {
      dropdownOptions: function () {
        return this.getDropdownOptions();
      },

      optionType: function () {
        var options = this.options;
        if (options.length === 0) {
          return null;
        }
        return typeof options[0];
      },

      hasOptionSlot: function () {
        return this.$slots['option-item'] || this.$scopedSlots['option-item'];
      }
    },

    data: function () {
      return {
        selectValue: this.value,
        inputValue: null,
        isShow: false
      };
    },

    methods: {
      selectChange: function () {
        var selectValue = this.selectValue;
        this.inputValue = selectValue;
        this.$emit('input', selectValue);
        this.$emit('change', selectValue);
      },

      visibleChange: function (isShow) {
        this.isShow = isShow;
        this.$emit('visible-change', isShow);
      },

      getDropdownOptions: function () {
        var isShow = this.isShow;
        var options = this.options;
        if (isShow) {
          return options;
        }

        if (options.length === 0) {
          return [];
        }

        var value = this.value;
        if (value === '') {
          return [];
        }

        var optionType = this.optionType;
        if (optionType !== 'object') {
          return options.indexOf(value) !== -1 ? [value] : [];
        }

        var valueKey = this.valueKey;
        var valueField = this.valueField;
        var option;
        if (valueKey) {
          option = _.find(options, function (obj) {
            return obj[valueField] === value[valueKey];
          });
        } else {
          option = _.find(options, function (obj) {
            return obj[valueField] === value[valueField];
          });
        }
        if (option === undefined) {
          option = [];
        } else {
          option = [option];
        }

        return option;
      }
    },

    template: template
  };
}();
